<template>
  <el-tag :effect="effect" :type="keyword ? keyword.type || 'primary' : 'info'" size="small">
    <slot v-if="$slots.default"></slot>
    <template v-else>
      {{ keyword ? keyword[labelName] : props.data }}
    </template>
  </el-tag>
</template>
<script setup lang="ts">
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    options?: any;
    labelName?: string;
    valueName?: string;
    effect?: string; //  plain-线性 light-常规 dark-面性
  }>(),
  {
    labelName: 'label',
    valueName: 'value',
    effect: 'dark',
    options: [],
  },
);
const keyword = computed(() => {
  const _find = props.options.find((el: any) => el[props.valueName] === props.data)
  return _find || null;
});
</script>
<style scoped></style>
